<style lang="scss" scoped>
.container{
    height: 100%;
    background-image: url('/static/images/login/loginbg.jpg');
    background-size: 100% 100%;    
    text-align: center; //实现元素水平居中
    .login{
        padding: 1rem 0; 
        p{
            line-height: 0.35rem;
            font-size: 0.24rem;
            color: #FFFFFF;
        }

        button{
            width: 2.95rem;
            height: 0.4rem;
            line-height: 0.26rem;
            border-radius: 0.03rem;
            background-color: rgba(255, 152, 0, 1);
            color: rgba(255, 255, 255, 1);
            font-size: 0.18rem;
            text-align: center;
            margin:0 0.4rem;
        }
    }
    
}
</style>

<template>
    <div class="container">
        <div class="login">
            <div class="logo">
                <img src="/static/images/login/logo.png" style="width:2.5rem;height:0.6rem"/>
            </div>
            <p>临床检测样本采集系统</p>
            <Form ref="formLogin" :model="formLogin" :rules="rulesLogin">
                <FormItem prop="username">
                    <Input type="text" v-model="formLogin.username" placeholder="请输入用户名" >
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="password">
                    <Input type="password" v-model="formLogin.password" placeholder="请输入密码" name="password" @keyup.enter="login">
                        <Icon type="ios-locked-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                  <FormItem >
                        <Button type="primary" @click="login" >登录</Button>
                    </FormItem>
            </Form>                         
        
        </div>
    </div>
</template>

<script>
import {sampleData} from 'api/index.js';
import {setCookie,getCookie,delCookie} from 'common/js/cookie.js'
export default {
    name:'login',
    data(){
        return{
            formLogin:{
                username:'',
                password:''
            },
            rulesLogin:{
                username:[{required:true,message:'用户名不能为空',trigger:'blur'}],
                password:[{required:true,message:'密码不能为空',trigger:'blur'}]
            }
        }
    },
    methods:{
        login(){
            this.$refs['formLogin'].validate((valid) => {
                if(valid){
                    let obj={
                        username:this.formLogin.username,
                        password:this.formLogin.password
                    }
                    sampleData.loginIndex(obj).then((res)=>{
                        if(res.code==0||res.code==200){
                            delCookie('token');
                            setCookie('token',res.token,'360');
                            this.$router.push('/index');
                        }
                        else{
                            this.$Message.error(res.msg);
                        }
                    }).catch(error=>{
                        this.$Message.error(error);
                    })                    
                }                
            })
   
        }
    }    
}
</script>


